//生产环境
//引入 路径内置模块
const path = require('path');
//引入 导出html文件内置模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
	//入口
	entry:{
		//可以有多个入口，也可以有一个，如果有一个就默从这一个入口开始解析
		main:"./src/main.js"
	},
	output:{
		//相对转绝对 __dirname表示当前路径的绝对路径
		path:path.resolve( __dirname,'dist'),
	    filename:'./build.js'
	},
	//声明模块 包含各个loader
	module:{
		loaders:[
			{
				//style-loader   css-loader
				//遇到后缀名为.css的文件，webpack先用css-loader加载器去解析这个文件
				//最后计算完成css,将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签
				//webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader
				test:/\.css$/,
				loader:'style-loader!css-loader'
			},
			{
				//url-loader后面有参数限制 url-loader?limit=40000
				//图片大小 小于参数值的 生成base64编码文件，使用base64编码
				//可以减少一次图片的网络请求；那么对于比较大的图片，使用base64就不合适了
				//编码会和html混在一起，一方面可读性差，另一方面加大了html页面大小
				//反而加大了下载页面的大小，得不偿失了呢，因此设置一个合理的limit是非常有必要的
				test:/\.(jpg|png|jpeg|gif|svg)$/,
				loader:'url-loader?limit=40000'
			},
			{
				test:/\.less$/,
				loader:'style-loader!css-loader!less-loader'
			},
			{
				//处理ES6.7.8
				test:/.\js$/,
				loader:'babel-loader',
				//排除node_modules 不编译
				exclude:/node_modules/,
				options:{
					//处理关键字
					presets:['env'],
					//处理函数
					plugins:['transform-runtime']
				}
			},
			{
				test:/.\vue$/,
				loader:'vue-loader'
			}
		]
	},
	plugins:[
		//插件
		new HtmlWebpackPlugin({
			//参照html文件输出带打包目录
			template:path.resolve( __dirname,'index.html')
		})
	]
}
